<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style>
	*{
		margin: 0;
		padding: 0;
	}
	#zong{
		width: 1200px;
		height: 100px;
		margin :0 auto;
		position: relative;

	}
	#zong .jk{
		float: left;
		width: 80px;
		height: 60px;
		position: absolute;
		top: 20px;
		left: 100px;
	}
	#zong .jf{
		float: right;
		width: 80px;
		height: 60px;
		position: absolute;
		top: 20px;
		right: 100px;
	}
	
	#div1{
		width: 900px;
		height: 200px;
		background: red;
		margin :0 auto;
		position: relative;
		overflow: hidden;
	}
	#div1 ul{
		position: absolute;
		top: 0;
		left: 0;
		float: left;
	}

	#div1  li {
		float: left;
		list-style: none;
		margin-left: 40px;
	}
	
	#div1  img {
		width: 200px;
		height: 200px;
	}
	
	</style>

</head>
<body>
<!--<ul>-->
	<!--<li>dklkjh</li>-->
	<!--<li>dd</li>-->
	<!--<li>d</li>-->
	<!--<li>ddddd</li>-->
<!--</ul>-->
	<div id="zong">
		<img class="jk" src="" title="点左">
		<img class="jf" src="img/22.jpg" title="点右">
		<div id="div1">
			<ul>
				<li><img src="../img/111686786.png"></li>
				<li><img src="../img/111686786.png"></li>
				<li><img src="../img/111686786.png"></li>
				<li><img src="../img/111686786.png"></li>
			</ul>
		</div>
	</div>
	<script type="text/javascript">
		window.onload=function(){
			var oDiv=document.getElementById("div1");
			var oUl=document.getElementsByTagName("ul")[0];
			var aLi=oUl.getElementsByTagName("li");
			var speed=-2;
			oUl.innerHTML+=oUl.innerHTML;
			//console.log(oUl.style.left);
//			console.log(oUl.innerHTML); //innerHTML 获取父元素下内容
			oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
			//console.log(aLi[0].offsetWidth*aLi.length+'px')
			//结果是3200px
			//console.log(aLi[0].offsetWidth);//offsetWidth 当前对象的宽
			console.log(oUl.style.width); //oUl.style.width 的宽
			function demo(){
				if (oUl.offsetLeft <- oUl.offsetWidth/2) {
					oUl.style.left='0';
				}
				//console.log(oUl.style.left="0");
				//console.log(oUl.offsetLeft <- oUl.offsetWidth/2); //结果false
				if (oUl.offsetLeft>0) {//console.log(oUl.offsetLeft>0); //结果false
					oUl.style.left=-oUl.offsetWidth/2+'px';
				}
				oUl.style.left=oUl.offsetLeft+speed+'px';
				//console.log(oUl.style.left=-oUl.offsetWidth/2+'px');结果是-1600
				//console.log(oUl.style.left=oUl.offsetWidth/2+'px'); //结果是1600
			}
			var timer=setInterval(demo,30);//30是速度
			//console.log(demo);
			oDiv.onmouseover=function(){
				clearInterval(timer);
			}
			oDiv.onmouseout=function(){
				timer=setInterval(demo,30);
			}

			var a=document.getElementsByTagName("img")[0].onclick=function(){
				speed=-2;
			};
			var b=document.getElementsByTagName("img")[1].onclick=function(){
				speed=2;
			};
		}

	</script>
</body>
</html>